<template>
  <div class="class">
    <el-form :model="form" ref="refForm" class="form">
      <el-input
        type="text"
        v-model="form.name"
        size="small"
        placeholder="请输入姓名"
        style="width: 150px;"
      ></el-input>
      <el-button type="primary" @click="submitForm('form')" style="margin-left:10px;">查询</el-button>
      <el-button type="danger" @click="resetForm('form')">重置</el-button>
    </el-form>

    <!-- 操作区 -->
    <div class="btn">
      <el-button type="primary" plain @click="add">添加</el-button>
    </div>

    <!-- 列表数据 -->
    <div
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.5)"
    >
      <el-table :data="tableData" style="width: 100%" border align="center">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="department_one" label="一级部门" width="120" align="center"></el-table-column>
        <el-table-column prop="identity_card" label="身份证号" width="180" align="center"></el-table-column>
        <el-table-column prop="bank_card" label="银行卡号" width="180" align="center"></el-table-column>
        <el-table-column prop="basic" label="基本工资" width="100" align="center"></el-table-column>
        <el-table-column prop="jobs" label="岗位工资" width="100" align="center"></el-table-column>
        <el-table-column prop="performance" label="绩效工资" width="100" align="center"></el-table-column>
        <el-table-column prop="total_salary" label="工资总额" width="100" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" align="center" @click="look(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curr_page"
        :page-sizes="[10, 20, 50]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 添加员工 -->
    <addStaff
      :dialogVisible="dialogVisible"
      :rowData="rowData"
      @on-status-change="onStatusChange"
      @on-addStaff="onAddStaff"
    ></addStaff>
  </div>
</template>

<script>
import addStaff from "@/components/staffManage/addStaff";
export default {
  name: 'staffList',
  props: {},
  components: {
    addStaff,
  },
  data() {
    return {
      loading: true, 
      dialogVisible: false,             //添加、编辑信息
      rowData: {},
      form: {
        name: ''
      },
      total: 0,                         //总条数
      page_size: 10,                    //每页条数 
      curr_page: 0,                     //当前页数
      tableData: [],

    }
  },
  computed: {},
  mounted() { },
  updated() { },
  destroyed() { },
  methods: {
    //查看员工
    look(row) {
      this.rowData = row
    },
    //添加员工
    add() {
      this.dialogVisible = true
    },
    // 添加员工弹窗
    onAddStaff(row) {

    },
    resetForm(){
      this.form.name = ''
    },
    // 监听模态框回调
    onStatusChange(val) {
      this.dialogVisible = val
    },
    //分页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //当前页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    getDatas() {
      this.$fetch.getStaffList({

      }).then(res => {
        this.loading = false
        this.tableData = res.data
      }).catch(error => error)
    }
  },
  watch: {},
  created() {
    this.getDatas()
  },
}

</script>

<style scoped lang='less'>
.class {
  .block {
    margin: 10px 0;
  }
  .btn {
    margin: 10px 0;
  }
}
</style>
